<template>
  <div id="safe">
    <!-- 邮箱绑定 -->
    <div class="safe-box tc fl">
      <div class="pic">
        <img src="../../../../assets/img/email.png" class="mt36" />
      </div>
      <p class="pt12 f13">绑定邮箱</p>
      <p class="f16">{{user.email? "已绑定":"未绑定"}}</p>
      <p class="safeBox-des ptb24 color-888">绑定邮箱后，您可以通过邮箱登录、邮箱找回密码</p>
      <el-button type="primary" @click="fixEmail = true">{{user.email ? "绑定邮箱":"更改邮箱"}}</el-button>
    </div>
    <!-- 手机绑定 -->
    <div class="safe-box tc phone fl">
      <div class="pic">
        <img src="../../../../assets/img/phone.png" class="mt36" />
      </div>
      <p class="pt12 f13">绑定邮箱手机号</p>
      <p class="f16">未绑定</p>
      <p class="safeBox-des ptb24 color-888">绑定手机号后，您可以通过手机号登录、手机号找回密码</p>
      <el-button type="primary" @click="changPhone">绑定手机号</el-button>
    </div>
    <!-- 登录密码 -->
    <div class="safe-box tc fr">
      <div class="pic">
        <img src="../../../../assets/img/password.png" class="mt36" />
      </div>
      <p class="pt12 f13">修改密码</p>
      <p class="f16">已设置</p>
      <p class="safeBox-des ptb24 color-888">设置密码后,您可以根据该密码进行登录</p>
      <el-button type="primary" @click="fixPass = true">修改密码</el-button>
    </div>

    <el-dialog title="绑定邮箱" top="40vh" :visible.sync="fixEmail" :lockScroll="false">
      <template>
        <el-form :inline="true" label-width="55px">
          <el-form-item label="邮箱号">
            <el-input v-model="newEmail" :disabled="lockEmail"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="float:right" type="primary" @click="sendCode">发送验证码</el-button>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="code"></el-input>
          </el-form-item>
          <br />
          <br />
          <el-form-item>
            <el-button style="float:right" type="primary" @click="submmitEmail">提交</el-button>
          </el-form-item>
          <el-form-item>
            <el-button style="float:right" @click="fixEmail=false">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
    <el-dialog title="修改密码" top="40vh" :visible.sync="fixPass" :lockScroll="false">
      <template>
        <el-form :inline="true" label-width="55px">
          <el-form-item label="原密码">
            <el-input v-model="oldPass" placeholder="请输入原密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="newPass" placeholder="请输入新密码" show-password></el-input>
          </el-form-item>
          <br />
          <br />
          <el-form-item>
            <el-button style="float:right" type="primary" @click="submmitPass">提交</el-button>
          </el-form-item>
          <el-form-item>
            <el-button style="float:right" @click="fixPass=false">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fixPass: false,
      fixEmail: false,
      lockEmail: false,
      code: null,
      oldPass: null,
      newPass: null,
      newEmail: null,
      newPass: null,
      user: {
        id: null,
        name: null,
        profile: null,
        gender: null,
        phone: null,
        email: null,
        actived: true,
        address: null,
        certificatied: true
      }
    };
  },
  created() {
    this.axios.get("/user/info").then((resp)=>{
      this.user = resp.data
    })
  },
  methods: {
    sendCode() {
      if (!this.newEmail) {
        this.$message.error("邮箱不能为空!");
      } else {
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (!reg.test(this.newEmail)) {
          this.$message.error("邮箱格式不正确!");
          return;
        }
        //发送邮箱
        this.axios
          .post("/user/send/code", {
            email: this.newEmail
          })
          .then(resp => {
            if (resp.code == 0) {
              this.lockEmail = true;
              this.$message.success(resp.msg);
            } else {
              this.$message.error(resp.msg);
            }
          });
      }
    },
    submmitEmail() {
      //更新用户信息
      if (!this.newEmail || !this.code) {
        this.$message.error("邮箱或验证码不能为空!");
      } else {
        this.axios
          .post("/user/bind", {
            email: this.newEmail,
            code: this.code
          })
          .then(resp => {
            if (resp.code != 0) {
              this.$message.error(resp.msg);
              this.lockEmail = false;
            } else {
              this.$message.success(resp.msg);
              this.user.email = this.newEmail;
              this.fixEmail = false;
            }
          });
      }
    },
    changPhone() {
      this.$message.error("功能还未开放!敬请期待!");
    },
    submmitPass() {
      if (!this.oldPass || !this.newPass) {
        this.$message.error("原密码或新密码不能为空!");
      } else {
        this.axios
          .post("/user/pass", {
            oldPass: this.oldPass,
            newPass: this.newPass
          })
          .then(resp => {
            if (resp.code == 0) {
              this.$message.success(resp.msg);
              this.fixPass = false;
            } else {
              this.$message.error(resp.msg);
            }
          });
      }
    }
  }
};
</script>

<style scoped>
#safe {
  min-height: 515px;
  margin-top: 36px;
  /* padding-left: 85px; */
  /* background-color: bisque; */
}
/* 盒子 */
.safe-box {
  height: 443px;
  width: 30%;
  border: 1px solid #ddd;
}
/* 邮箱 */
.pic {
  height: 175px;
  width: 100%;
  /* background-color: aqua; */
}
.safeBox-des {
  height: 44px;
}
/* 手机 */
.phone {
  margin: 0 4.72%;
}
/* 密码 */
</style>
